<template>
	<view class="">
		<u-sticky>
			<view class="sticky">
				<u-tabs
					:list="list"
					name="name"
					:active-item-style="activeStyle"
					font-size="26"
					active-color="#CC1313"
					inactive-color="#666666"
					:is-scroll="true"
					:bar-width="90"
					:bar-height="2"
					:current="current"
					@change="change"
				></u-tabs>
			</view>
		</u-sticky>
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true" :headerHeight="50">
			<view class="" style="padding-bottom: 60upx;">
				<view
					class="order-con"
					v-for="(item, index) in dataList"
					:key="index"
					@tap.stop="navTo(`/pages/order/orderDetails?id=${item.id}&current=${current}`)"
				>
					<view class="order-top b-b row between">
						<view class="order-num">订单编号：{{ item.orderNum }}</view>
						<view class="" v-if="current != 5">
							<!-- 	"status":"状态 0待付款1已付款2待发货3待收货4已委托代售5已收货6申请退款7已退款8已取消"
							                         "refundStatus":"退款状态 0未申请1申请中2成功3失败" -->
							<view class="order-status" v-if="item.status == 0">待付款</view>
							<view class="order-status" v-if="item.status == 1">已付款</view>
							<view class="order-status" v-if="item.status == 2">待发货</view>
							<view class="order-status" v-if="item.status == 3">待收货</view>
							<view class="order-status" v-if="item.status == 4  && item.refundStatus==0">已委托代售</view>
							<view class="order-status" v-if="item.status == 5">已完成</view>
							<view class="order-status" v-if="item.refundStatus == 1">退款中</view>
							<view class="order-status" v-if="item.status == 7">已退款</view>
							<view class="order-status" v-if="item.status == 8">已取消</view>
						</view>
						<view class="" v-else>
							<view class="order-status" v-if="item.status == 0">等待客户付款</view>
							<view class="order-status" v-if="item.status == 4">已委托代售</view>
							<view class="order-status" v-if="item.status == 1">已售出,等待客户验收</view>
							<view class="order-status" v-if="item.status == 2">已售出,客户已验收</view>
							<view class="order-status" v-if="item.status == 6">客户退款</view>
						</view>
					</view>
					<view class="order-item-info fill">
						<view class="row between">
							<view class="cart-item-img">
								<image :src="item.icon" mode="aspectFill" class="img"></image>
								<view class="s-con row center"><image :src="item.icon" mode="" class="s"></image></view>
							</view>
							<view class="cart-item-right fill">
								<view class="clamp2 cart-item-title">{{ item.name }}</view>
								<view class="cart-item-price">￥{{ item.price }}</view>
								<view class="cart-item-num">x1</view>
							</view>
						</view>
						<view class="order-time" v-if="current != 5">
							<view class="" v-if="item.status == 0">
								<text>付款倒计时，过期订单自动取消:</text>
								<u-count-down
									:timestamp="item.time"
									:fontSize="22"
									color="#FA3E35"
									:show-days="false"
									separator="zh"
									separator-size="22"
									separator-color="#FA3E35"
									@end="countDownEnd(item, index)"
								></u-count-down>
							</view>

							<text v-if="item.status == 1 && current != 5">
								如果7天之内既不申请发货也不委托售卖，这个时候订单默认自动申 请发货
							</text>
						</view>
						<view class="order-bottom b-t row between">
							<view class="">
								<text class="cart-fee">
									实付：
									<text class="cart-money">{{ item.realPrice }}</text>
								</text>
							</view>
							<view class="row" v-if="current != 5">
								<view
									class="order-btn one"
									v-if="item.status == 3"
									hover-class="hover-opacity"
									@tap.stop="
										navTo(
											`/pages/public/subLine?id=${item.delivery.id}&name=${item.delivery.corp}&num=${
												item.deliveryNum
											}`
										)
									"
								>
									查看物流
								</view>
								<view
									class="order-btn one"
									v-if="item.status == 1"
									hover-class="hover-opacity"
									@tap.stop="entrustSellOrder({id: item.id, index, type: 'list'})"
								>
									委托代售
								</view>
								<view
									class="order-btn one"
									v-if="item.status == 0"
									hover-class="hover-opacity"
									@tap.stop="cancelOrder({id: item.id, index, type: 'list'})"
								>
									取消订单
								</view>
								<view
									class="order-btn two"
									v-if="item.status == 0"
									hover-class="hover-opacity"
									@tap.stop="pay({orderNum: item.orderNum, id: item.id, index, type: 'list', price: item.realPrice})"
								>
									去付款
								</view>
								<view
									class="order-btn two"
									v-if="item.status == 3"
									hover-class="hover-opacity"
									@tap.stop="confirmReceipt({id: item.id, index, type: 'list'})"
								>
									确认收货
								</view>
								<view
									class="order-btn two"
									v-if="item.status == 1"
									hover-class="hover-opacity"
									@tap.stop="requestDeliveryOrder({id: item.id, index, type: 'list'})"
								>
									申请发货
								</view>
								<view
									class="order-btn two"
									v-if="item.status == 5 || item.status == 7 || item.status == 8"
									hover-class="hover-opacity"
									@tap.stop="deleteOrder({id: item.id, index, type: 'list'})"
								>
									删除订单
								</view>
								<view
									class="order-btn two"
									v-if="item.status == 6 && item.refundStatus == 1"
									hover-class="hover-opacity"
									@tap.stop="cancelRequestOrder({id: item.id, index, type: 'list'})"
								>
									撤销退款
								</view>
								<view
									class="order-btn two"
									v-if="item.status == 2"
									hover-class="hover-opacity"
									@tap.stop="cancelDeliveryOrder({id: item.id, index, type: 'list'})"
								>
									取消申请发货
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</s-pull-scroll>
		<mix-modal
			ref="mixModal"
			:text="modalText"
			:tips="modalTips"
			:item="modalPrice"
			:title="modalTitle"
			@onConfirm="onModalConfirm"
		></mix-modal>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import orderMixins from "./mixin/order.js";
export default {
	mixins: [orderMixins],
	data() {
		return {
			activeStyle: {
				color: "#000000"
			},
			list: [
				{
					name: "全部"
				},
				{
					name: "待付款"
				},
				{
					name: "已付款"
				},
				{
					name: "待发货"
				},
				{
					name: "待收货"
				},
				{
					name: "委托代售"
				},
				{
					name: "已完成"
				},
				{
					name: "退款/售后"
				}
			],
			current: 0,
			dataList: []
		};
	},
	onLoad(options) {
		if (options.type) {
			this.current = options.type;
		}
	},
	onShow() {
		this.refresh();
	},
	methods: {
		change(index) {
			this.current = index;
			this.refresh();
		},
		pullDown(pullScroll) {
			setTimeout(() => {
				this.loadData(pullScroll);
			}, 200);
		},
		countDownEnd(item, index) {
			console.log(index);
			if (this.current == 0) {
				this.refresh();
			} else {
				this.dataList.slice(index, 1);
				if (this.dataList.length == 0) {
					this.$refs.pullScroll.empty();
				}
			}
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync("uid"),
				type: this.current,
				pageNo: pullScroll.page,
				pageSize: "10"
			};
			const res = await this.$request("goods/order-list", data, {showLoading: true});
			if (pullScroll.page == 1) {
				this.dataList = [];
			}
			if (res.result == 1 || res.data.list.length == 0) {
				pullScroll.empty();
				return;
			}
			res.data.list.forEach(item => {
				item.time = (new Date(item.createTime).getTime() + 60 * 60 * 1000 - new Date().getTime()) / 1000;
				console.log(item.time);
			});
			this.dataList = this.dataList.concat(res.data.list);
			pullScroll.page >= Math.ceil(res.data.count / 10) ? pullScroll.finish() : pullScroll.success();
		}
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}
</style>

<style scoped lang="scss">
.order-time {
	padding: 20upx 0;
	text {
		font-size: 22upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fa3e35;
	}
}
.order-con {
	background: #ffffff;
	border-radius: 20upx;
	width: 94%;
	margin: 0 auto;
	margin-bottom: 20upx;
	padding: 20upx;
}
.order-top {
	line-height: 70upx;
}
.order-num {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.order-status {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.order-item-info {
	padding: 20upx 0;
}
.cart-item-img {
	width: 144upx;
	height: 144upx;
	border-radius: 10upx;
	overflow: hidden;
	position: relative;
}
.img {
	width: 144upx;
	height: 144upx;
}
.cart-item-right {
	height: 144upx;
	position: relative;
	padding-left: 20upx;
}
.cart-item-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 44upx;
	position: absolute;
	top: 0;
}
.cart-item-price {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
	position: absolute;
	bottom: 0;
}
.cart-item-num {
	position: absolute;
	top: 60upx;
	right: 0;
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.cart-fee {
	font-size: 27upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.cart-money {
	color: #000000;
	font-size: 30upx;
	position: relative;
}
.cart-money::before {
	content: "￥";
	font-size: 22upx;
}
.order-bottom {
	padding-top: 20upx;
}
.order-btn {
	padding: 10upx 36upx;
	text-align: center;
	border-radius: 36upx;
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
}
.one {
	color: #666666;
	border: 1px solid #e7e7e7;
	margin-right: 40upx;
}
.two {
	color: #99130c;
	border: 1px solid #99130c;
}
</style>
